<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.moveBox {
				width: 100px;
				height: 3px;
				background-color: black;

				animation: mymove 2s 5;
				/* 
			animation(动画)  用法 animation：动画名 动画时间 播放次数
				  */
			}

			/* @keyframes  关键帧 动画的名称 从第一帧到最后一帧 */


			@keyframes mymove {
				from {
					width: 0px;
				}

				to {
					width: 300px;
				}
			}

			.transitionBox {
				width: 100px;
				height: 5px;
				background-color: blue;
				transition: width 3s;
			}

			.transitionBox:hover {
				width: 300px;
				/* 动画，从width=100，持续2s，拉伸width到300 */
			}

			ul {
				list-style: none;
			}

			li {
				/*条目 一个菜单选项*/
				float: left;
				margin-right: 15px;
				background-color: #ee1166;
				padding: 5px 10px 5px 10px;

				/* 浏览器自己去扩充的动画  -webkit 谷歌Chrome 浏览器 */
				/* transform  变向 skewX  X方向进行30度得倾斜  里面的内容也会倾斜*/
				-webkit-transform: skewX(30deg);
			}

			li:hover {
				background-color: aqua;
			}

			a {
				text-decoration: none;
				color: white;

				/* 上面的效果会造成文字倾斜，那么在反着转就可以转回来 */
				-webkit-transform: skewX(-30deg);
				/* 改变a便签得性质，改成块得结构 配合上一句把字正过来 */
				display: block;
			}
		</style>
	</head>
	<body>
		<div>移动的效果：</div>
		<div class="moveBox"></div>


		<div class="transitionBox">拉伸效果</div>
		<div>
			<ul>
				<li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
				<li><a href="http://www.cctv.com" target="_blank">央视影音</a></li>
				<li><a href="http://www.sina.com" target="_blank">新浪头条</a></li>
				<li><a href="http://www.baidu.com" target="_blank">今日头条</a></li>
			</ul>
		</div>


	</body>
</html>
